
<script  lang="ts">
import { Network,Data  } from 'vis-network/standalone/umd/vis-network.min.js';
import { DataSet } from 'vis-data/peer/umd/vis-data.js';
import { ref ,h} from 'vue';
import { getElementLabelLine } from 'element-tree-line';
import 'element-tree-line/dist/style.css';
import closeUrl  from '../src/assets/titileBar/close.gif';
import lockUrl from "../src/assets/titileBar/locker.gif"
import submanUrl from "../src/assets/titileBar/adminSubnet.gif"
import deviceUrl from "../src/assets/titileBar/oltattr.gif"
import falutUrl from "../src/assets/titileBar/faultMgr.gif"
import liveUrl from "../src/assets/titileBar/livealarm.gif"
import bellUrl from "../src/assets/titileBar/alarmbell.gif"
import subnetUrl from "../src/assets/titileBar/subnetManager.gif"
import useUrl from "../src/assets/titileBar/user.gif"

import hasUrl from "../src/assets/showBar/hasalarm.gif"
import alarmTotalUrl from "../src/assets/showBar/AlarmTotal.gif"
import critUrl from "../src/assets/showBar/CritAlarm.gif"
import majorUrl from "../src/assets/showBar/MajorAlarm.gif"
import minorUrl from "../src/assets/showBar/MinorAlarm.gif"
import unconfUrl from "../src/assets/showBar/unconfirm_alarm.gif"
import warnUrl from "../src/assets/showBar/WarnAlarm.gif"
import neTotalUrl from "../src/assets/showBar/netotal.gif"
import subnetIcon from "../src/assets/showBar/subnet.gif"

export default{
 data() {
   return {
    closeUrl:closeUrl,
    lockUrl:lockUrl,
    submanUrl:submanUrl,
    deviceUrl:deviceUrl,
    falutUrl:falutUrl,
    liveUrl:liveUrl,
    bellUrl:bellUrl,
    subnetUrl:subnetUrl,
    useUrl:useUrl,
    hasUrl:hasUrl,
    alarmTotalUrl:alarmTotalUrl,
    critUrl:critUrl,
    majorUrl:majorUrl,
    minorUrl:minorUrl,
    unconfUrl:unconfUrl,
    warnUrl:warnUrl,
    neTotalUrl:neTotalUrl,
    subnetIcon:subnetIcon,
    activeIndex:ref('1'),
    treeData :ref([
      {
        label: '北京东土科技股份有限公司',
        level:0,
        children: [
          {
            label: 'A',
            level:1,
            children: [
              { label: '192.168.0.1' ,level:0},
              { label: '192.168.0.6' ,level:0},
              { label: '192.168.0.50' ,level:0},
              { label: '192.168.0.51' ,level:0}
            ]
          },
          {
            label:'B',
            level:1
          }
        ]
      }
    ]),
    defaultProps:{
      children: 'children', // 指定子树数据的属性名，默认是children，你也可以自定义为其他名称如subMenu等。
      label: 'label' // 指定节点标签的属性名，默认是label。
    },
    tableData:[
      {
        status:  '未确认',
        date: '2016-05-03',
        source: 'sw50:192.168.0.51:电源_1',
        type: '设备告警',
        level:'紧急告警'
      },
      {
        status:  '未确认',
        date: '2016-05-03',
        source: 'sw50:192.168.0.51:电源_1',
        type: '设备告警',
        level:'紧急告警'
      },
      {
        status:  '未确认',
        date: '2016-05-03',
        source: 'sw50:192.168.0.51:电源_1',
        type: '设备告警',
        level:'紧急告警'
      },
      {
        status:  '未确认',
        date: '2016-05-03',
        source: 'sw50:192.168.0.51:电源_1',
        type: '设备告警',
        level:'紧急告警'
      },
    ],
    nodes:new DataSet([
    { id: 1, label: 'A', level: 0 },
    { id: 2, label: '192.168.0.1', level: 1 },
    { id: 3, label: '192.168.0.6', level: 1 },
    { id: 4, label: '192.168.0.50', level: 1 },
    { id: 5, label: '192.168.0.51', level: 1 },
    { id: 6, label: 'B', level: 0 },
      ]),
      edges: new DataSet([
    { id:1,from: 1, to: 2 },
    { id:2,from: 1, to: 3 },
    { id:3,from: 1, to: 4 },
    { id:4,from: 1, to: 5 }
      ])
 }
},
mounted(){
this.inittopo()
},
components:{ElementTreeLine: getElementLabelLine(h)},
  methods:{
    handleSelect(key, keyPath)  {
      console.log(key, keyPath);
    },
    handleNodeClick(data){
      console.log(data) // 处理节点点击事件，例如导航到某个页面或执行某些操作。
    },
    inittopo(){
      // 创建网络拓扑图的配置
 const container:any = this.$refs.graphContainer;
      const data:Data = {
        nodes: this.nodes,
        edges: this.edges,
      };
      const options = {
        nodes: {
          shape: 'circle',
          size: 30,
          font: {
            size: 14,
          },
        },
        edges: {
          width: 2,
          arrows: {
            to: { enabled: true },
          },
        },
        layout: {
                improvedLayout:false
            },
            interaction: {
                navigationButtons: true, // 如果为真，则在网络画布上绘制导航按钮。这些是HTML按钮，可以使用CSS完全自定义。
                keyboard: {
                    enabled: true,
                    speed: {
                        x: -1,
                        y: -1,
                        zoom: 0.02
                    },
                    bindToWindow: true
                } // 启用键盘快捷键
            },
            physics: {
                stabilization: false,
                barnesHut: {
                    centralGravity: 8, // 中心重力吸引器将整个网络拉回中心
                    springLength: 80, // 边缘被建模为弹簧。这个弹簧长度是弹簧的剩余长度
                    gravitationalConstant: -80000, // 重力吸引。我们喜欢排斥 所以价值是负数。如果你想要排斥力更强，减小值（所以-10000，-50000）。
                    avoidOverlap: 0.2, // 接受范围：[0 .. 1]。当大于0时，会考虑节点的大小。该距离将由重力模型的节点的包围圆的半径计算。值1是最大重叠避免。
                    damping: 0.3,
                    springConstant: 0.5
                },
                minVelocity: 16 // 一旦达到所有节点的最小速度，我们假设网络已经稳定，仿真停止。
            }
      };

      // 创建网络拓扑图
      if(container){
        new Network(container, data, options);
        
      }else{
        console.error('容器元素未找到');
      }
    }

  }
}

</script>
<style>
.custom-tree-node {
  display: flex;
  align-items: center;
  padding: 0 8px;
}
</style>
<template> 
  
    <!-- <Dashboard></Dashboard> -->
  <!-- <TitleMenu></TitleMenu> -->
  <!-- <Versions /> -->
   <div class="container">
    <div class="header">
      <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect">
          <el-menu-item index="1"><img :src="closeUrl" title="退出" alt="退出"/></el-menu-item>
          <el-menu-item index="2"><img :src="lockUrl" title="锁定客户端" alt="锁定客户端"></el-menu-item>
          <el-menu-item index="3"><img :src="submanUrl" title="子网管理" alt="子网管理"></el-menu-item>
          <el-menu-item index="4"><img :src="deviceUrl" title="设备属性配置" alt="设备属性配置"></el-menu-item>
          <el-menu-item index="5"><img :src="falutUrl" title="故障管理" alt="故障管理"></el-menu-item>
          <el-menu-item index="6"><img :src="liveUrl" title="活动告警列表" alt="活动告警列表"></el-menu-item>
          <el-menu-item index="7"><img :src="bellUrl" title="告警铃音设置" alt="告警铃音设置"></el-menu-item>
          <el-menu-item index="8"><img :src="subnetUrl" title="子网权限管理" alt="子网权限管理"></el-menu-item>
          <el-menu-item index="9"><img :src="useUrl" title="EMS用户" alt="EMS用户"></el-menu-item>
        </el-menu>
        <div class="showbar">
          <img :src="hasUrl" title="告警信号" alt="告警信号">
          <img :src="alarmTotalUrl" title="告警总数" alt="告警总数"><div class="showCont">9</div>
          <img :src="critUrl" title="紧急告警" alt="紧急告警"><div class="showCont">9</div>
          <img :src="majorUrl" title="主要告警" alt="主要告警"><div class="showCont">9</div>
          <img :src="minorUrl" title="次要告警" alt="次要告警"><div class="showCont">9</div>
          <img :src="unconfUrl" title="未确认告警" alt="未确认告警"><div class="showCont">9</div>
          <img :src="warnUrl" title="通信正常" alt="通信正常">
          <img :src="neTotalUrl" title="设备总数" alt="设备总数"><div class="showCont">9</div>
        </div>
    </div>
    <div class="middle">
      <div class="leftSide">
        <el-tree
        :data="treeData"
        :props="defaultProps" 
        :expand-on-click-node="false"  
        @node-click="handleNodeClick"
        
      >
    
   <!-- 使用插槽自定义节点内容 -->
   <template #default="{ node, data }">
    <element-tree-line
                        :node="node"
                        :showLabelLine="false">
                        <span class="custom-tree-node">
        <!-- 根据是否有子节点显示不同的图片图标 -->
         <div v-if="data.level">
          <img :src="subnetIcon" style="height: 25px;" alt="Node Icon">
         </div>
        <span>{{ node.label }}</span>
      </span>

    </element-tree-line>
      
    </template>

    </el-tree>
      </div>
      <div class="rightSide">
        <div ref="graphContainer" style="width: 100%; height: 100%;"></div>
      </div>
    </div>   
    
    <div class="bottom">
      <el-table :data="tableData" stripe style="width: 100%;">
        <el-table-column prop="status" label="告警状态" width="180" />
        <el-table-column prop="date" label="产生时间" width="180" />
        <el-table-column prop="source" label="告警源" />
        <el-table-column prop="type" label="告警类型" />
        <el-table-column prop="level" label="严重级别" />
      </el-table>
      
    </div>
 

   </div>
</template>
